<template>
    <div class="coming">
        <div class="item" v-for="item in soon" :key="item.id">
            <div class="picture">
                <img :src="item.pic">
            </div>
            <div class="information">
                <p class="moviename">{{item.moviename}}</p>
                <p><span>{{item.num}}人想看</span></p>
                <p class="tostar">主演： {{item.tostar}}</p>
                <p>未来30天内上映</p>
            </div>
            <div class="but">
                <button>预售</button>
            </div>
        </div>
    </div>
</template>

<script scoped>
    export default {
        name: 'coming',
        methods: {
            getcomingPlayData() {
                var that = this;
                // axios.get('/mock/comingPlayData.json')
                axios.get('/api/comingPlayData.json')
                .then(response => {
                    console.log(response);
                    if(response.status == 200) {
                        if(response.data && response.data.soon) {
                            that.soon = response.data.soon
                        }
                    }
                })
                .catch(function(error) {
                    console.log(error);
                })
            }
        },
        created() {
            this.getcomingPlayData();
        },
        data() {
            return {
                soon: []
            }
        }
    }
</script>

<style>
    .coming {
        padding-bottom: 50px;
    }

    .item {
        width: 95%;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-content: center;
        padding-bottom: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }

    .picture {
        width: 20%;
    }

    img {
        width: 100%;
    }

    .information {
        width: 55%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        color: #666;
        font-size: 14px;
    }

    .moviename {
        font-size: 18px;
        color: black;
        font-weight: bold;
    }

    /* .information p span {
        color: orange;
        margin-left: 5px;
        font-weight: bold;
    } */

    .tostar {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .but {
        width: 20%;
        display: flex;
    }

    .but button {
        width: 50px;
        height: 30px;
        background-color: rgb(41, 159, 206);
        border: 0;
        border-radius: 5px;
        color: white;
        margin: auto;
    }
</style>